<template>
  <div class="channel_edit">
    <!-- 我的频道 -->
    <van-cell :border="false" title="我的频道">
      <van-button @click="isShowEdit=!isShowEdit" class="edit_btn" size="small" plain type="danger">{{isShowEdit? '完成':'编辑' }}</van-button>
    </van-cell>
    <van-grid class="my_channel" :gutter="10">
      <van-grid-item @click="onMyChannel(index)" class="channel_item" :class="{ active: index===active}" v-for="(channel, index) in myChannels" :key="channel.id" :text="channel.name">
        <van-icon v-show="isShowEdit&&index!==0" slot="icon" name="close" />
      </van-grid-item>
    </van-grid>
    <!-- 频道推荐 -->
    <van-cell :border="false" title="频道推荐"></van-cell>
    <van-grid class="recommend_channel" :gutter="10">
      <van-grid-item @click="onAddChannels(item)" icon="plus" class="channel_item" v-for="item in recommendChannels" :key="item.id" :text="item.name" />
    </van-grid>
  </div>
</template>

<script>
import { getAllChannels, addUserChannels, deleteUserChannels } from '@/api/channels'
import { mapState } from 'vuex'
import { setItem } from '@/utils/storage.js'
export default {
  props: {
    myChannels: {
      type: Array,
      required: true
    },
    active: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      allChannels: [],
      isShowEdit: false
    }
  },
  // 计算属性中使用了 channels（我的频道）数据
  // 只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据
  computed: {
    // 获取vuex中的user
    ...mapState(['user']),
    recommendChannels () {
      // 直接返回filter过滤之后的数组
      return this.allChannels.filter(channels => {
        // this.myChannels.find:两个值
        // 如果通过find找到了这一项，返回值:就是找到的这一项
        // 如果通过find没有找到这一项 返回值:undefined
        return !this.myChannels.find(myChannels => myChannels.id === channels.id)
      })
    }
  },
  created () {
    this.loadGetChannels()
  },

  methods: {
    // 加载所有频道列表数据
    async loadGetChannels () {
      try {
        const { data: res } = await getAllChannels()
        this.allChannels = res.data.channels
      } catch (err) {
        console.log(err)
        this.$toast.fail('获取失败')
      }
    },
    // 点击推荐频道进行添加
    onAddChannels (item) {
      this.myChannels.push(item)
      // 数据持久化
      if (this.user) {
        // 1.已登录，存到数据库
        try {
          addUserChannels({
            id: item.id,
            seq: this.myChannels.length
          })
        } catch (err) {
          this.$toast.fail('添加失败')
        }
      } else {
        // 2.未登录，存到本地
        setItem('hmtt_channels', this.myChannels)
      }
    },
    // 点击我的频道
    onMyChannel (index) {
      if (this.isShowEdit) {
        if (index === 0) return
        if (index <= this.active) {
          this.$emit('updateActive', this.active - 1, true)
        }
        const id = this.myChannels[index].id
        // 删除
        this.myChannels.splice(index, 1)
        // 持久化
        this.deleteChannels(id)
      } else {
        // 切换
        // 子向父传值，通过$emit
        // 自定义事件，传参
        this.$emit('updateActive', index, false)
      }
    },
    deleteChannels (id) {
      if (this.user) {
        // 已登录
        console.log(id)
        try {
          deleteUserChannels(id)
        } catch (err) {
          this.$toast.fail('删除失败')
        }
      } else {
        setItem('hmtt_channels', this.myChannels)
      }
    }
  }
}
</script>

<style scoped lang='less'>
.channel_edit {
  padding-top: 80px;
  .edit_btn {
    width: 104px;
    height: 48px;
    border-radius: 30px;
    color: #f85959;
  }

  /deep/.channel_item {
    .van-grid-item__content {
      background-color: #F3F5F5;
      width: 160px;
      height: 86px;
      border-radius: 6px;
      padding: 0;
      .van-grid-item__text {
        font-size: 28px;
        color: #212121;
      }
    }
    .van-grid-item__content::after {
      border-width: 0;
      border: none;
    }
  }
  /deep/.active {
    .van-grid-item__text {
      color: red !important;
    }
  }

  /deep/.my_channel {
    .van-icon-close {
      position: absolute;
      font-size: 36px;
      top: -13px;
      right: -13px;
    }
    .van-grid-item__icon-wrapper {
    position: unset;
    }
    .van-grid-item__text{
      margin-top: 0;
    }
  }
  // 频道推荐+ 和文本样式处理
  /deep/.recommend_channel {
    .van-grid-item__content {
      flex-direction: row;
      .van-icon-plus {
        font-size: 24px;
        color: #333;
      }
    }
    .van-grid-item__text{
      margin-top: 8px;
      margin-left: 4px;
    }
  }
}
</style>
